<template>
	<view>
		<my-search :bgColor="bgColor" @click="hanHan"></my-search>
		<view class="scroll-view-container">
			<!-- 左侧滚动区域 -->
			<scroll-view scroll-y="true" :style="{height:wh+'px'}" class="left-scroll-view">
				<!-- block 是一个包裹性质的容器的，但是不在页面当中渲染 -->
				<block v-for="(item,index) in cateList" :key="index">
					<!--  -->
					<view :class="['left-scroll-view-item',active== index ? 'active':'']" @click="activeChange(index)">{{item.cat_name}}</view>
				</block>
			</scroll-view>
			<!-- 右侧滚动区域 -->
			<scroll-view scroll-y="true" :style="{height:wh+'px'}" class="right-scroll-view" :scroll-top="scrollTop">
				<view class="cate-level2" v-for="(item2,index) in cateLevelTwo" :key="index">
					<view class="cate-level2-title">/{{item2.cat_name}}/</view>
					<!-- 三级分类列表  item2.children  一定要注意命名问题-->
					<view class="cate-level3-list">
						
						<view class="cate-level3-item" v-for="(item3,index3) in item2.children" :key="index3" @click="goGoodsList(item3)">
							<image src="../../static/logo.png" mode=""></image>
							<text>{{item3.cat_name}}</text>
						</view>
					</view>
				</view>				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {categoriesData} from '@/api/cate_request.js'
	export default {
		data() {
			return {
				wh:0,
				// 分类中的数据
				cateList:[],
				// 下标为0
				active:0,
				// 二级分类列表的初始值
				cateLevelTwo:[],
				// 滚动条距离顶部的位置
				scrollTop:0,
				bgColor:'#ccc'
			}
		},
		onLoad() {
			// 获取当前系统的信息
			const sysInfo = uni.getSystemInfoSync();
			// 窗口的可用高度
			this.wh = sysInfo.windowHeight - 50;
			// 调用函数发送网络数据请求
			this.getCateList();
		},
		methods: {
			hanHan(){
				console.log('hanhan');
			},
			async getCateList(){
				// 发起请求
				const {data:res} = await categoriesData();
				console.log(res);
				// 失败
				if(res.meta.status !== 200) return uni.$showMsg();
				// 成功之后将其赋给data中的初始数据
				this.cateList = res.message;
				// 二级分类的列表
				this.cateLevelTwo = res.message[0].children;
			},
			activeChange(index){
				this.active = index;
				// 点击下边  二级列表当中的下标
				this.cateLevelTwo = this.cateList[index].children;
				// 当点击之后 导航切换 
				// this.scrollTop 0   scroll-view scroll-top 0 滚动 它变换  this.scrollTop 0
				// 0 1
				this.scrollTop = this.scrollTop === 0 ? 1 :0;
			},
			goGoodsList(item3){
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?catId=' + item3.cat_id
				})
			}
		}
	}
	/* 
	 1. 基本两列布局之后 
	 scroll-view的高度  整个屏幕的高度
	 动态的样式
	 
	 2.获取数据进行布局
	 
	 3.数据请求回来 渲染左侧分类列表
	 问题：一个高度不对（获取的系统高度的单位px  单位rpx 差了2倍）
	   每一个上面都有红色的竖线 active 都有了active 
	   默认情况 第一个需要有active    index0
	   点击谁谁有active类名
	   有情况 有active有的没有
	   index = 0 
	   active == index ?'active':''
	   
	   :class="['left-scroll-view-item',index === active?'active':'']"
	   
	   3. 渲染右侧 二级
	   
	   默认状态渲染 res.message[0].children
	   
	   点击左侧的导航 点击谁就是谁对应的数据  res.message[active].children
	   
	   
	   4. 渲染的三级导航 
	   
	   5.点击左侧导航数据数据应该变换
	   因为默认1  下标0
	   
		6.切换一级导航分类滚动条位置需要重置 0 scrolltop 0
		7. 点击三级分类当中的图片 跳转到 商品列表页面  uni.navigateTo({})
		url  参数
		/subpkg/goods_list/goods_list?catId= item3.cat_id
		
		
		
		8.主页和 分类都用到了搜索框   公共的东西 封装组件  组件 components文件夹中
	 */
</script>

<style lang="scss">
.scroll-view-container{
	display: flex;
	.left-scroll-view{
		width: 240rpx;
		.left-scroll-view-item{
			color: #fff;
			font-size: 15px;
			line-height: 120rpx;
			background-color: #000;
			text-align: center;
			&.active {
				background-color: green;
				// 激活项 active 竖线
				// 让块元素垂直居中 总结
				// 垂直方向居中		
				position: relative;		
				&::before{
					content: '';
					display: block;
					width: 6rpx;
					height: 60rpx;
					background-color: red;
					position: absolute;
					left: 0;
					top:50%;
					transform: translateY(-50%);
				}
			}
		}
	}
	.right-scroll-view{
		.cate-level2{
			.cate-level2-title{
				font-size: 15px;
				font-weight: 700;
				text-align: center;
				padding: 15px 0;
			}
			.cate-level3-list{
				display: flex;
				flex-wrap: wrap;
				.cate-level3-item{
					width: 33.33%;
					display: flex;
					// 图片 字  图片在上 字在下
					flex-direction: column;
					align-items: center;
					image{
						width: 120rpx;
						height: 120rpx;
					}
				}
			}
		}
	}
}
</style>
